<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>单词发音播放器</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      padding: 30px;
    }
    .word-item {
      display: flex;
      align-items: center;
      margin-bottom: 12px;
    }
    .word-text {
      font-size: 18px;
      margin-right: 10px;
    }
    .play-icon {
      cursor: pointer;
      font-size: 20px;
      color: #007BFF;
    }
    .play-icon:hover {
      color: #0056b3;
    }
    .controls {
      margin-bottom: 20px;
    }
  </style>
</head>
<body>

  <h2>单词列表</h2>

  <div class="controls">
    播放速度：
    <select id="speedSelect">
		<option value="0.3">0.3x 极慢</option>
      <option value="0.5">0.5x 特慢</option>
	  <option value="0.8">0.7x 慢速</option>
      <option value="1" selected>1x 正常</option>
      <option value="1.5">1.5x 快速</option>
      <option value="2">2x 极速</option>
    </select>
  </div>

  <div id="wordList">
    <div class="word-item">
      <span class="word-text">hello</span>
      <span class="play-icon" onclick="playAudio('hello')">🔊</span>
    </div>
    <div class="word-item">
      <span class="word-text">world</span>
      <span class="play-icon" onclick="playAudio('world')">🔊</span>
    </div>
    <div class="word-item">
      <span class="word-text">python</span>
      <span class="play-icon" onclick="playAudio('python')">🔊</span>
    </div>
	    <div class="word-item">
      <span class="word-text">competition</span>
      <span class="play-icon" onclick="playAudio('competition')">🔊</span>
    </div>
	    <div class="word-item">
      <span class="word-text">computer</span>
      <span class="play-icon" onclick="playAudio('computer')">🔊</span>
    </div>
	</div>
	    <div class="word-item">
      <span class="word-text">hard-working</span>
      <span class="play-icon" onclick="playAudio('hard-working')">🔊</span>
    </div>
  </div>

  <audio id="audioPlayer" style="display:none;"></audio>

  <script>
    function playAudio(word) {
      const audio = document.getElementById('audioPlayer');
      const speed = parseFloat(document.getElementById('speedSelect').value);
      audio.src = `${word}.mp3`;
      audio.playbackRate = speed;
      audio.play();
    }
  </script>

</body>
</html>
